<script setup lang="ts">
import { ref } from 'vue';
import useStore from '../store';

const { todos } = useStore();
const content = ref('');

const handleAdd = () => {
  if (content.value.trim()) {
    todos.handleAdd(content.value.trim());
    content.value = '';
  }
};
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
      v-model="content"
      @keyup.enter="handleAdd"
    />
  </header>
</template>

<style lang="less" scoped></style>
